<!-- 卡片 -->
<template>
  <el-card>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="卡片位置">
        <el-select v-model="formInline.position" placeholder="请输入商品名称">
          <el-option v-for="item in positionType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="卡片名称">
        <el-input v-model="formInline.cardAdTitle" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="卡片状态">
        <el-select v-model="formInline.adStatus" placeholder="请输入商品名称">
          <el-option label="正常" value="1" />
          <el-option label="禁用" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card style="margin-top: 24px;">
    <el-descriptions title="弹窗列表">
      <template #extra>
        <el-button @click="addNotice" type="primary">添加</el-button>
      </template>
    </el-descriptions>
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column prop="position" label="卡片位置">
        <template #default="{ row }">
          {{ positionMap[row.position] }}
        </template>
      </el-table-column>
      <el-table-column prop="cardAdTitle" label="卡片名称"></el-table-column>
      <el-table-column prop="address" label="图片">
        <template #default="{ row }">
          <el-image :preview-src-list="[row.titleImage]" :preview-teleported="true" style="width: 50px; height: 50px"
            :src="row.titleImage" />
        </template>
      </el-table-column>
      <el-table-column prop="type" label="链接类型">
        <template #default="{ row }">{{ row.type === 1 ? '内部链接' : '外部链接' }}</template>
      </el-table-column>

      <el-table-column prop="adStatus" label="开启状态">
        <template #default="{ row }">
          <el-switch @change="switchChange(row.cardAdId, $event)" v-model="row.adStatus" />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="更新时间" />
      <el-table-column prop="address" label="操作">
        <template #default="{ row }">
          <el-button @click="edit(row.cardAdId)" type="primary" link>编辑</el-button>
          <el-button @click="del(row.cardAdId)" v-if="!row.adStatus" type="danger" link>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <el-pagination v-model:current-page="formInline.pageNum" v-model:page-size="formInline.pageSize"
    :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="total"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  <!-- 添加弹窗 -->
  <el-dialog v-model="AddDialog" title="添加" width="25%" :before-close="handleClose">
    <el-form label-position="right" :rules="rules" ref="formRef" label-width="100px" :model="formLabelAlign">
      <el-form-item label="卡片位置" width="100%" prop="position">
        <el-select v-model="formLabelAlign.position" placeholder="请输入商品名称">
          <el-option v-for="item in positionType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="卡片名称" prop="cardAdTitle">
        <el-input v-model="formLabelAlign.cardAdTitle" placeholder="请输入玩法/活动名称" />
      </el-form-item>
      <el-form-item label="弹窗图片" prop="titleImage">
        <el-upload class="avatar-uploader" action=" " :show-file-list="false" :before-upload="beforeAvatarUpload">
          <img v-if="formLabelAlign.titleImage" :src="formLabelAlign.titleImage" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="链接类型" prop="type">
        <el-radio-group v-model="formLabelAlign.type" class="ml-4">
          <el-radio :label="1" size="large">内部链接</el-radio>
          <el-radio :label="2" size="large">外部链接</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="添加链接" prop="linkUrl">
        <el-button v-if="formLabelAlign.type === 1" type="primary" @click="addLink">添加链接</el-button>
        <el-input v-else v-model="formLabelAlign.linkUrl" placeholder="请输入玩法/活动名称" />
      </el-form-item>
      <el-form-item label="是否展示" prop="adStatus">
        <el-switch v-model="formLabelAlign.adStatus" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="validateFn(formRef, save)">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
  <OptionLink v-model:LinkShow="LinkShow"></OptionLink>
</template>
<script setup>
import { defineComponent, ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { GetCardListApi, AddCardListApi, DelCardListApi, changeCardListApi, EchoCardListApi, EditCardListApi } from '@/api/CardAd'
import { uploadImageFn, validateFn } from '@/utils'
import OptionLink from './components/link.vue'

defineComponent({
  components: {
    OptionLink
  }
})

//表单校验
const formRef = ref()
const rules = reactive({
  cardAdTitle: [{ required: true, message: '请输入名称', trigger: 'change' }],
  position: [{ required: true, message: '请输入位置', trigger: 'change' }],
  titleImage: [{ required: true, message: '请上传图片', trigger: 'change' }],
  adStatus: [{ required: true, message: '请选择是否展示', trigger: 'change' }],
  type: [{ required: true, message: '请选择链接类型', trigger: 'change' }],
  linkUrl: [{ required: true, message: '请添加链接', trigger: 'change' }],
})

const isPopupType = [
  {
    value: true,
    label: '弹窗',
  },
  {
    value: false,
    label: '公告',
  }
]

const positionType = [
  {
    value: 1,
    label: '左',
  },
  {
    value: 2,
    label: '右上',
  },
  {
    value: 3,
    label: '右下',
  }
]
const positionMap = {
  1: '左',
  2: '右上',
  3: '右下'
}
const formInline = ref({
  cardAdTitle: null,
  adStatus: null,
  position: null,
  pageNum: 1,
  pageSize: 10
})
const total = ref(0)
const tableData = ref([])
const NoticeFrom = ref({
  noticeTitle: null,
  noticeContent: null,
  belongFlag: 1,
  popup: true,
  popupImage: null,
  linkUrl: null,
  recommend: 0
})
const AddDialog = ref(false)
//弹窗form
const formLabelAlign = ref({
  cardAdTitle: null,
  position: null,
  belongFlag: 1,
  titleImage: null,
  linkUrl: 'ceshiceshi',
  adStatus: 1,
  type: 2
})
const LinkShow = ref(false)


//获取列表
async function GetNoticeList(data) {
  const res = await GetCardListApi(data)
  res.data.content.forEach(item => {
    item.adStatus === 1 ? item.adStatus = true : item.adStatus = false
  })
  total.value = res.data.totalSize
  tableData.value = res.data.content
}

GetNoticeList(formInline.value)

//添加公告
function addNotice() {
  AddDialog.value = true
}

//弹窗关闭
function handleClose() {
  AddDialog.value = false
  formLabelAlign.value = {
    cardAdTitle: null,
    position: null,
    belongFlag: 1,
    titleImage: null,
    linkUrl: 'ceshiceshi',
    adStatus: 1,
  }
  formRef.value.resetFields()
  GetNoticeList(formInline.value)

}

//保存
async function save() {
  formLabelAlign.value.adStatus ? formLabelAlign.value.adStatus = 1 : formLabelAlign.value.adStatus = 0
  console.log(formLabelAlign.value);
  if (!formLabelAlign.value.cardAdId) {
    await AddCardListApi(formLabelAlign.value)
    ElMessage({
      message: '添加成功',
      type: 'success',
    })
  } else {
    formLabelAlign.value.adStatus = ''
    await EditCardListApi(formLabelAlign.value)
    ElMessage({
      message: '编辑成功',
      type: 'success',
    })
  }
  handleClose()
  GetNoticeList(formInline.value)
}

//pageSize改变时
function handleSizeChange(params) {
  formInline.value.pageSize = params
  GetNoticeList(formInline.value)
}

//页码改变时
function handleCurrentChange(params) {
  formInline.value.pageNum = params
  GetNoticeList(formInline.value)

}

//查询
function onSubmit() {
  console.log(formInline);
  GetNoticeList(formInline.value)
}

//重置
function onReset() {
  formInline.value = {
    noticeTitle: null,
    popup: null,
    pageNum: 1,
    pageSize: 10
  }
  GetNoticeList(formInline.value)

}

//table表格选中
function handleSelectionChange(params) {

}

//上传图片
async function beforeAvatarUpload(file) {
  const res = await uploadImageFn(file)
  formLabelAlign.value.titleImage = res
}

//关闭链接弹窗
function ClooseLink(params) {
  LinkShow.value = false
}

//添加链接
function addLink() {
  LinkShow.value = true
}

//删除按钮
async function del(params) {
  ElMessageBox.confirm(
    '确认删除吗?',
    '删除',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(async () => {
    await DelCardListApi(params)
    GetNoticeList(formInline.value)
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消成功',
    })
  })
}

//开关按钮
async function switchChange(navigationId, params) {
  await changeCardListApi(navigationId)
  GetNoticeList(formInline.value)
  ElMessage({
    message: '修改状态成功',
    type: 'success',
  })
}

//编辑按钮
async function edit(id) {
  const res = await EchoCardListApi(id)
  res.data.adStatus === 1 ? res.data.adStatus = true : res.data.adStatus = false
  formLabelAlign.value = res.data
  console.log(formLabelAlign.value);
  AddDialog.value = true

}
</script>

<style scoped lang="sass">

</style>